<template>
    <div class="AgriculturalSharing">
        <div class="left">
            <div>
                <gedanweifenlei></gedanweifenlei>
            </div>
            <div>
                <div>
                    <xitongyuanfenlei></xitongyuanfenlei>
                </div>
                <div>
                    <xitongshangyun></xitongshangyun>
                </div>
            </div>
            <div>
                <shujugailan></shujugailan>
            </div>
        </div>
        <div class="right">
            <div>
                <ziyuanfenbuyujietonglv></ziyuanfenbuyujietonglv>
            </div>
            <div>
                <shujuziyuan></shujuziyuan>
            </div>
            <div>
                <shishishujugongxiang></shishishujugongxiang>
            </div>
        </div>
    </div>
</template>

<script>
    import shujugailan from "./shujugailan"


    import gedanweifenlei from "./gedanweifenlei"
    import xitongyuanfenlei from "./xitongyuanfenlei"
    import xitongshangyun from "./xitongshangyun"
    import ziyuanfenbuyujietonglv from "./ziyuanfenbuyujietonglv"
    import shujuziyuan from "./shujuziyuan"
    import shishishujugongxiang from "./shishishujugongxiang"


    export default {
        name: "Home",
        components: {
            gedanweifenlei,
            xitongyuanfenlei,
            xitongshangyun,
            ziyuanfenbuyujietonglv,
            shujuziyuan,
            shishishujugongxiang,
            shujugailan
        },
        data() {
            return {}
        }
    };
</script>
<style lang="scss" scoped>
    .AgriculturalSharing {
        height: 100%;
        width: 100%;
        padding: 40px;

        display: flex;

        .left {
            /*flex: 1;*/
            width: 43%;
            display: flex;
            > div {
                &:nth-of-type(1) {
                    width: 32%;
                }
                &:nth-of-type(2) {
                    width: 35%;
                    margin: 0 20px;
                    display: flex;
                    flex-direction: column;
                    >div{
                        flex: 1;
                        &:first-child{
                            margin-bottom: 20px;
                        }
                    }
                }
                &:nth-of-type(3) {
                    width: 32%;
                }
            }
        }
        .right {
            /*flex: 1;*/
            margin-left: 20px;
            width: 57%;
            display: flex;
            > div {
                &:nth-of-type(1) {
                    width: 28%;
                }
                &:nth-of-type(2) {
                    width: 44%;
                    margin: 0 20px;
                }
                &:nth-of-type(3) {
                    width: 28%;
                }
            }
        }

        /*> div {*/

        /*margin: 0 20px;*/
        /*&:nth-of-type(1) {*/
        /*width: 12.6%;*/
        /*background: orange;*/
        /*}*/
        /*&:nth-of-type(2) {*/
        /*width: 14.6%;*/
        /*background: orange;*/
        /*}*/
        /*&:nth-of-type(3) {*/
        /*width: 15.6%;*/
        /*background: orange;*/
        /*}*/
        /*&:nth-of-type(4) {*/
        /*width: 15.6%;*/
        /*background: orange;*/
        /*}*/
        /*&:nth-of-type(5) {*/
        /*width: 23.6%;*/
        /*background: orange;*/
        /*}*/
        /*&:nth-of-type(6) {*/
        /*width: 14.6%;*/
        /*background: orange;*/
        /*}*/

        /*}*/

    }

</style>
